import { Link } from '@brillout/docpress'

Overview of how to define the URL of your pages.


## Filesystem Routing

Vike supports *Filesystem Routing*: the URL of a page is determined by where the page is located on your filesystem.

```bash
FILESYSTEM                     URL
====================           ======
pages/index/+Page.js           /
pages/about/+Page.js           /about
pages/jobs/+Page.js            /jobs
```

> The directories `pages/` and `index/` are ignored by Filesystem Routing.

> `+` files are explained at <Link href="/config#files" doNotInferSectionTitle />.

> For detailed information about Filesystem Routing, see <Link href="/filesystem-routing" />.

### Parameterized routes

```bash
FILESYSTEM                     URL
========================       =======================
pages/movie/@id/+Page.js       /movie/1, /movie/2, ...
```

> The parameter `id` is available at <Link href="/pageContext">`pageContext.routeParams.id`</Link>.

### Groups

You can organize your pages into groups:

```yaml
FILESYSTEM                             URL
================================       ==================
pages/(marketing)/index/+Page.js       /
pages/(marketing)/about/+Page.js       /about
pages/admin-panel/index/+Page.js       /admin-panel
pages/admin-panel/users/+Page.js       /admin-panel/users
```
> Any directory inside parentheses such as `(marketing)` is ignored by Filesystem Routing.

It also enables you to easily set different configurations for different pages:

```yaml
# Define a layout for all marketing pages
pages/(marketing)/+Layout.js
pages/(marketing)/index/+Page.js
pages/(marketing)/about/+Page.js

# Define a layout for all admin pages
pages/admin-panel/+Layout.js
pages/admin-panel/index/+Page.js
pages/admin-panel/users/+Page.js
```

> See <Link href="/config#inheritance" />.


### `src/`

If you prefer, you can define your files within a `src/` directory:

```yaml
FILESYSTEM                     URL
========================       ======
src/pages/index/+Page.js       /
src/pages/about/+Page.js       /about
```

> The directory `src/` is ignored by Filesystem Routing.

> The directory `src/` <Link href="/filesystem-routing#ignored-directories">isn't ignored by config inheritance</Link>: make sure to define *all* your `+` files inside `src/`.


### Domain-driven file structure

For advanced apps, you may want to consider a *domain-driven file structure*.

```yaml
# Domain: marketing
(marketing)/pages/+Layout.js
(marketing)/pages/index/+Page.js
(marketing)/pages/about/+Page.js
(marketing)/components/ContactUs.js

# Domain: admin panel
admin-panel/pages/+Layout.js
admin-panel/pages/index/+Page.js
admin-panel/pages/users/+Page.js
admin-panel/components/Charts.js
admin-panel/database/fetchUsers.js
```

> If you aren't familiar with file structures, see <Link href='/file-structure' />.


## Route String

Instead of Filesystem Routing, you can define a Route String.

```js
// /pages/product/+route.js

// This file defines the route of /pages/product/+Page.js

// Route String
export default '/product/@id'
```

> The parameter `id` is available at <Link href="/pageContext">`pageContext.routeParams.id`</Link>.

More information at:
 - <Link href="/route-string" />


## Route Function

You can use Route Functions to get full programmatic flexibility for advanced routing logic.

```js
// /pages/product/edit/+route.js

// This file defines the route of /pages/product/edit/+Page.js

// We use a RegExp, but we could as well use a routing library.
import partRegex from 'part-regex'
const routeRegex = partRegex`/product/${/([0-9]+)/}/edit`

// Route Function
export function route(pageContext) {
  const match = pageContext.urlPathname.match(routeRegex)
  if (!match) return false
  const [, id] = match
  return { routeParams: { id } }
}
```

More information at:
 - <Link href="/route-function" />

## Route Guards

You can use a `guard()` hook to protect pages from unauthorized/unexpected access.

```js
// /pages/admin/+guard.js

import { render } from 'vike/abort'

// This guard() hook protects all pages /pages/admin/**/+Page.js

export async function guard(pageContext) {
  if (!pageContext.user.isAdmin) {
    throw render(401, "You aren't allowed to access this page.')
  }
}
```

> This `guard()` hook applies to all pages living at `/pages/admin/**/*`, see <Link href="/config#inheritance" />.

More information at:
 - <Link href="/guard" />


## TypeScript

There is work-in-progress for adding type safety to routes, see [#698 Typesafe Links](https://github.com/vikejs/vike/issues/698).


## React Router / Vue Router

Although we usually don't recommend it, you can use Vike with React Router and Vue Router:
 - <Link href="/react-router" />
 - <Link href="/vue-router" />

## See also

 - <Link href="/filesystem-routing" />
 - <Link href="/route-string" />
 - <Link href="/route-function" />
 - <Link href="/routing-precedence" />
 - <Link href="/guard" />
 - <Link href="/base-url" />
 - <Link href="/vue-router" />
 - <Link href="/react-router" />
 - <Link href="/server-routing-vs-client-routing" />
